<template>
  <div>
    <div class="service_content">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
               label-position="top">
        <el-form-item label="保险类型" prop="insurance_type">
          <el-select v-model="formData.insurance_type" placeholder="请选择保险类型" filterable clearable
                     :style="{width: '100%'}">
            <el-option v-for="(item, index) in insurance_typeOptions" :key="index" :label="item.name"
                       :value="item.insurance_id" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因" prop="instructions">
          <el-input v-model="formData.instructions" type="textarea" placeholder="请输入申请原因"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="上传凭证" prop="evidence">
          <el-upload
            ref="instructions_img"
            :file-list="instructions_imgfileList"
            :action="instructions_imgAction"
            list-type="picture-card"
            multiple
            :before-upload="instructions_imgBeforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="维修方式" prop="service_way">
          <el-select v-model="formData.service_way" placeholder="请选择维修方式" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in service_wayOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货地址" prop="returnAddress">
          <el-input v-model="formData.returnAddress" type="textarea" placeholder="请输入收货地址"
                    :autosize="{minRows: 1, maxRows: 2}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button style="width: 100%"
                     type="primary"
                     :loading="formData.loading"
                     round
                     @click="submitForm"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>

export default {
  name: 'insuranceAfterSale',
  components: {},
  data() {
    return {
      loading: false,
      formData: {
        orderNo: this.$route.query.orderNo,
        good_id: this.$route.query.good_id,
        service_id: this.$route.query.service_id || "",
        insurance_name: '',
        good_status: 1,
        service_reason: "",
        refund_amount: 0, //退款金额
        instructions: "",
        instructions_img: "",
        evidence: "",
        service_way: "寄回至商家",
        express: 'sf213124123123',
        returnAddress: '',
        status: 0,
        store_reply: '',
      },
      rules: {
        insurance_type: [{
          required: true,
          message: '请选择保险类型',
          trigger: 'change'
        }],
        instructions: [{
          required: true,
          message: '请输入申请原因',
          trigger: 'blur'
        }],
        service_way: [{
          required: true,
          message: '请选择维修方式',
          trigger: 'change'
        }],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      instructions_imgAction: 'http://41ix769428.zicp.vip:14704/upload/uploadImg',
      instructions_imgfileList: [],
      imgPathArr: [],
      insurance_typeOptions: [],
      service_wayOptions: [{
        "label": "寄回至商家",
        "value": "寄回至商家"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getInsuranceInfo()
  },
  mounted() {
  },
  methods: {
    async getInsuranceInfo() {
      // const res = await this.$axios.get('/serviceOrder/addServiceOrder')
      const res = await this.$axios.get('/insurance/getInsuranceByOrderNoAndGoodId',
        {
          params: {
            orderNo:this.$route.query.orderNo,
            good_id: this.$route.query.good_id,
          }
        })
      this.insurance_typeOptions = res.list
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        this.getImgStr()
        // this.$axios.post('/serviceOrder/addServiceOrder', {
        this.$axios.post('/serviceOrder/addServiceOrder', {
            ...this.formData,
        }).then((res) => {
          if (res.status == 200){
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.replace({
              path:'/serviceBase/serviceDetail',
              query:{
                // id: res.id, //新增id
                'good_id': this.$route.query.good_id,
                'orderNo': this.$route.query.orderNo,
              }
            })
          } else {
            this.$message({
              message: '提交失败,请重试!',
              type: 'error'
            });
          }
        })
      })
    },
    instructions_imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    handleSuccess(file, fileList) {
      if (file.status === 200) {
        this.instructions_imgfileList.push(fileList)
      } else {
        //错误
      }
    },
    handleRemove(file, fileList) {
      this.instructions_imgfileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getImgStr() {
      if (this.instructions_imgfileList) {
        this.imgPathArr = []
        this.instructions_imgfileList.forEach((item) => {
          this.imgPathArr.push(item.response.data)
        })
        this.formData.instructions_img = this.imgPathArr.join(",")
      }
    }
  }
}

</script>
<style scoped>

.el-upload__tip {
  line-height: 1.2;
}

</style>
